/*
 * @Author: Otway
 * @Date: 2019-01-09 11:16:08
 * @LastEditors: Otway
 * @LastEditTime: 2019-08-30 18:50:09
 * @copyright: h-visions
 */
import React, { PureComponent } from 'react';
import { BasicLayout, BasicLayoutSearch } from '../../components/BasicLayout';
import { withRouter } from 'react-router';
import { Row, Col, Form, Select, Layout, Upload, Button, InputNumber, Table, Input, Alert, Spin, Modal, Drawer, Divider, Icon, Badge, PageHeader, Tabs, Card } from 'antd';





class BottomholeDetail extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            title: '',
            queryForm: {},
            path: ''
        }
    }
    componentDidMount() {
        console.log(this.props.location)
        this.setState({
            title: this.props.location?.data ? this.props.location.data.title : JSON.parse(localStorage.getItem('Bottomhole_Report')).title,
            queryForm: this.props.location?.data ? this.props.location.data.queryForm : JSON.parse(localStorage.getItem('Bottomhole_Report')).queryForm,
            path: this.props.location?.data ? this.props.location.data.path : JSON.parse(localStorage.getItem('Bottomhole_Report')).path,
        })
    }
    componentWillUnmount() {
        this.setState = () => {
            return;
        };
    }
    handlePrint = () => {
        let printReport = document.getElementById('printReport')
        console.log(printReport)
        var flag = false;
        console.log(printReport.offsetHeight)
        if (printReport.offsetHeight === 0) {
            flag = false;
            // return;
        } else {
            flag = true
        }
        if (flag) {
            clearTimeout(times);
            setTimeout(() => {
                var printInnerHTML = printReport.innerHTML;
                window.document.body.innerHTML = printInnerHTML
                window.print();
                window.location.reload();
            });
        } else {
            var times = setTimeout(() => {
                this.print()
            }, 500);
        }
    }

    render() {
        const { form: { getFieldDecorator } } = this.props;

        const { title, queryForm, path } = this.state

        return (
            <div>
                <BasicLayoutSearch>
                    <PageHeader
                        style={{ padding: '4px 24px' }}
                        onBack={() => this.props.history.push({ pathname: '/' + path })}
                        title={<div>{title ? title : '三大板下孔等高检测记录表'}</div>}
                        extra={<Button type='primary' icon='printer' onClick={this.handlePrint}>打印</Button>}
                    >
                    </PageHeader>
                </BasicLayoutSearch>
                <Layout className="layout-model">
                    <div id='printReport'>
                        <div style={{ width: 900, textAlign: 'center', margin: '0 auto', padding: '40px 100px 20px' }}>
                            <div style={{ fontSize: 20, fontWeight: 'bold', padding: '30px 0 30px 0' }}>附录4-1  大机装配三大板等高精度调整记录表</div>
                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                <div><span>机型/批号：</span><span style={{ display: 'inline-block', width: 400, textAlign: 'left', borderBottom: '1px solid #000000a6' }}>{queryForm?.formData?.model}</span></div>
                                {
                                    // isInPlant   0 厂外  1 厂内
                                    queryForm?.formData?.isInPlant == 1 ?
                                        <div style={{ textAlign: 'right' }}>厂外（） 厂内（√）</div>
                                        :
                                        queryForm?.formData?.isInPlant == 0 ?
                                            <div style={{ textAlign: 'right' }}>厂外（√） 厂内（）</div>
                                            :
                                            <div style={{ textAlign: 'right' }}>厂外（） 厂内（）</div>
                                }
                            </div>
                            <br />
                            <p style={{ textAlign: 'left' }}>（一）三大板下孔等高检测调整数据记录表：</p>
                            <table border={1} width={'70%'} style={{ margin: '0 auto' }}>
                                <colgroup>
                                    <col width={150} />
                                    <col width={180} />
                                    <col width={180} />
                                    <col width={100} />
                                    <col width={100} />
                                </colgroup>
                                <tbody>
                                    <tr height={50}>
                                        <td rowSpan={2}>名称</td>
                                        <td rowSpan={2}>测量点</td>
                                        <td rowSpan={2}>要求标准</td>
                                        <td colSpan={2}>测量实际数据</td>
                                    </tr>
                                    <tr height={50}>
                                        <td>测量点a</td>
                                        <td>测量点b</td>
                                    </tr>
                                    {
                                        queryForm?.dataSource1?.length > 0 || queryForm?.dataSource2?.length > 0 || queryForm?.dataSource3?.length > 0 ?
                                            null
                                            :
                                            <tr height={60}>
                                                <td colSpan={5}>无数据</td>
                                            </tr>
                                    }

                                    {
                                        queryForm?.dataSource1?.length > 0 ?
                                            queryForm?.dataSource1?.map((item, index) => {
                                                return <tr height={50}>
                                                    <td>{item.type}下孔</td>
                                                    <td>{item.measuringPoint}</td>
                                                    <td>{item.standard}</td>
                                                    <td>{item.message1}</td>
                                                    <td>{item.message2}</td>
                                                </tr>
                                            })
                                            : null
                                    }
                                    {
                                        queryForm?.dataSource2?.length > 0 ?
                                            queryForm?.dataSource2?.map((item, index) => {
                                                return <tr height={50}>
                                                    <td>{item.type}下孔</td>
                                                    <td>{item.measuringPoint}</td>
                                                    <td>{item.standard}</td>
                                                    <td>{item.message1}</td>
                                                    <td>{item.message2}</td>
                                                </tr>
                                            })
                                            : null
                                    }
                                    {
                                        queryForm?.dataSource3?.length > 0 ?
                                            queryForm?.dataSource3?.map((item, index) => {
                                                return <tr height={50}>
                                                    <td>{item.type}下孔</td>
                                                    <td>{item.measuringPoint}</td>
                                                    <td>{item.standard}</td>
                                                    <td>{item.message1}</td>
                                                    <td>{item.message2}</td>
                                                </tr>
                                            })
                                            : null
                                    }
                                </tbody>
                            </table>
                            <br />
                            <div style={{ textAlign: 'left' }}>测量工具：1、百分表；2、活动表架</div>
                            <br />
                            <div style={{ textAlign: 'left' }}>技术要求：用百分表打每个孔两端最低点（正视，左a点；右b点）将其结果相应地填入表格内，看是否符合标准，并作相应处理。</div>
                            <br />
                            <div style={{ flex: 6 }}>
                                {
                                    queryForm?.file?.imgUrl ?
                                        <img width={'100%'} height={300} src={queryForm?.file?.imgUrl} ></img>
                                        :
                                        <div>无图片</div>
                                }
                            </div>
                            <br />
                            <div style={{ display: 'flex', paddingTop: 20, textAlign: 'left' }}>
                                <div style={{ width: '49%' }}><span>装配员：</span><span style={{ display: 'inline-block', width: '80%', borderBottom: '1px solid #000000a6' }}></span></div>
                                <div>&emsp;</div>
                                <div style={{ width: '49%' }}><span>日期：</span><span style={{ display: 'inline-block', width: '80%', borderBottom: '1px solid #000000a6' }}></span></div>
                            </div>
                            <div style={{ display: 'flex', paddingTop: 20, textAlign: 'left' }}>
                                <div style={{ width: '49%' }}><span>组长确认：</span><span style={{ display: 'inline-block', width: '76%', borderBottom: '1px solid #000000a6' }}></span></div>
                                <div>&emsp;</div>
                                <div style={{ width: '49%' }}><span>日期：</span><span style={{ display: 'inline-block', width: '80%', borderBottom: '1px solid #000000a6' }}></span></div>
                            </div>
                            <div style={{ width: '100%', textAlign: 'left', paddingTop: 20 }}><span>结论：</span><span style={{ display: 'inline-block', width: '90%', borderBottom: '1px solid #000000a6' }}></span></div>
                            <div style={{ textAlign: 'right', paddingTop: 10 }}>表格编号：{queryForm?.formData?.formCoding}</div>
                        </div>
                    </div>

                </Layout>
            </div>
        );
    }
}
export default Form.create()(withRouter(BottomholeDetail));